<template>
  <div class="lifecycle-page">
    <h1>onMounted 生命周期钩子</h1>
    
    <div class="lifecycle-card">
      <h2>什么是 onMounted?</h2>
      <p>onMounted 钩子在组件挂载完成后调用，此时DOM已经渲染完成，可以安全地访问DOM元素。</p>
      
      <div class="code-example">
        <pre><code>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const message = ref('初始消息')
    
    onMounted(() => {
      console.log('组件已挂载')
      // 可以安全地访问DOM元素
      document.title = '页面已加载'
    })
    
    return { message }
  }
}
        </code></pre>
      </div>
    </div>
    
    <div class="lifecycle-card">
      <h2>实际演示</h2>
      <div class="demo-box" ref="demoBox">
        <p>DOM元素状态: {{ domStatus }}</p>
        <p>DOM元素宽度: {{ elementWidth }}px</p>
        <p>挂载时间: {{ mountTime }}</p>
        <button @click="refreshComponent">刷新组件</button>
      </div>
    </div>
    
    <div class="lifecycle-card">
      <h2>适用场景</h2>
      <ul>
        <li><strong>DOM操作：</strong>初始化需要访问DOM的库（如图表、地图等）</li>
        <li><strong>数据获取：</strong>组件挂载后发起API请求</li>
        <li><strong>事件监听：</strong>添加全局事件监听器</li>
        <li><strong>第三方集成：</strong>初始化第三方插件</li>
      </ul>
    </div>
    
    <div class="lifecycle-card">
      <h2>企业实践</h2>
      <p>在实际开发中，onMounted的常见用途：</p>
      <ul>
        <li>初始化图表库（ECharts、Chart.js等）</li>
        <li>加载组件所需的初始数据</li>
        <li>设置IntersectionObserver进行懒加载</li>
        <li>初始化富文本编辑器</li>
        <li>执行DOM测量和计算</li>
      </ul>
      <p>示例代码：</p>
      <div class="code-example">
        <pre><code>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { fetchUserData } from '@/api/user'

export default {
  setup() {
    const chartRef = ref(null)
    const userData = ref(null)
    const isLoading = ref(true)
    
    onMounted(async () => {
      // 初始化图表
      const chart = echarts.init(chartRef.value)
      chart.setOption({
        // 图表配置
      })
      
      // 获取数据
      try {
        userData.value = await fetchUserData()
      } catch (error) {
        console.error('获取用户数据失败:', error)
      } finally {
        isLoading.value = false
      }
      
      // 添加窗口大小变化监听
      window.addEventListener('resize', () => {
        chart.resize()
      })
    })
    
    return { chartRef, userData, isLoading }
  }
}
        </code></pre>
      </div>
    </div>
    
    <div class="navigation">
      <router-link to="/beforeMount" class="nav-button">上一个: onBeforeMount</router-link>
      <router-link to="/beforeUpdate" class="nav-button">下一个: onBeforeUpdate</router-link>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'OnMountedView',
  setup() {
    const demoBox = ref(null)
    const domStatus = ref('未知')
    const elementWidth = ref(0)
    const mountTime = ref('')
    
    onMounted(() => {
      console.log('onMounted 被调用')
      domStatus.value = 'DOM已挂载，可以访问'
      mountTime.value = new Date().toLocaleTimeString()
      
      // 访问DOM元素
      if (demoBox.value) {
        elementWidth.value = demoBox.value.offsetWidth
        console.log('DOM元素宽度:', elementWidth.value)
      }
      
      // 修改页面标题
      document.title = 'onMounted 示例页面'
    })
    
    const refreshComponent = () => {
      // 强制组件刷新
      domStatus.value = '刷新中...'
      setTimeout(() => {
        domStatus.value = 'DOM已挂载，可以访问'
        mountTime.value = new Date().toLocaleTimeString()
        if (demoBox.value) {
          elementWidth.value = demoBox.value.offsetWidth
        }
      }, 100)
    }
    
    return {
      demoBox,
      domStatus,
      elementWidth,
      mountTime,
      refreshComponent
    }
  }
}
</script>

<style scoped>
.lifecycle-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #3498db;
  text-align: center;
  margin-bottom: 30px;
}

.lifecycle-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h2 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.code-example {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 15px 0;
}

pre {
  margin: 0;
}

.demo-box {
  background-color: #e8f4fc;
  padding: 15px;
  border-radius: 5px;
  margin: 15px 0;
}

button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #2980b9;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

.navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.nav-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.nav-button:hover {
  background-color: #2980b9;
}
</style>